<template>
	<view class="box">
		<!-- 步骤条 -->
		<view class="steps">
			<view class="Progress">
				<view class="item" :class="{active:num==-1}">
					1
				</view>
				<view class="line">

				</view>
				<view class="item" :class="{active:num==0}">
					2
				</view>
				<view class="line">

				</view>
				<view class="item" :class="{active:num==1}">
					3
				</view>
			</view>
			<view class="ProgressCt">
				<view class="item">
					<view class="title">
						资料填写
					</view>
					<view class="remark">
						真实信息
					</view>
				</view>
				<view class="item">
					<view class="title">
						平台审核
					</view>
					<view class="remark">
						1-3工作日
					</view>
				</view>
				<view class="item">
					<view class="title">
						审核通过
					</view>
					<view class="remark">
						入驻成功
					</view>
				</view>
			</view>
		</view>
		<!-- 步骤1 -->
		<view class="stepOne" v-if="num==-1">
			<!-- 申请入驻资料信息 -->
			<view class="Ms_info">
				<view class="info">
					申请入驻资料信息
				</view>
				<view class="item">
					<view class="title">
						<span style="color: #FA453CFF;">*</span>商家名称
					</view>
					<view class="ipt">
						<input type="text" placeholder="请输入商家名称" v-model="name" />
					</view>
				</view>
				<view class="item" @click="()=>this.showType = true">
					<view class="title">
						<span style="color: #FA453CFF;">*</span>经营类型
					</view>
					<view class="ipt">
						<input type="text" placeholder="请选择商家经营类型" :disabled="true" v-model="mch_type" />
					</view>
					<view class="icon"></view>
				</view>
				<view class="item">
					<view class="title">
						<span style="color: #FA453CFF;">*</span>经营地址
					</view>
					<view class="ipt" @click="goSelectAddress">
						<input type="text" placeholder="请选择位置" v-model="cityData" :disabled="true" />
					</view>
					<view class="dw"></view>
				</view>
				<view class="item">
					<view class="title">
						<span style="color: #FA453CFF;">*</span>详细地址
					</view>
					<view class="ipt">
						<input type="text" placeholder="例如街道,门牌号" v-model="address" />
					</view>
				</view>
			</view>
			<!-- 联系人信息 -->
			<view class="relationInfo">
				<view class="item cancel">
					<view class="title">
						<span style="color: #FA453CFF;">*</span>联系人
					</view>
					<view class="ipt">
						<input type="text" placeholder="请输入联系人" v-model="linkman" />
					</view>
				</view>
				<view class="item">
					<view class="title">
						<span style="color: #FA453CFF;">*</span>联系电话
					</view>
					<view class="ipt">
						<input type="number" placeholder="请输入联系人电话" v-model="phone" />
					</view>
				</view>
			</view>
			<!-- 上传商户logo -->
			<view class="uploSfz" @click="handleChooseImage(4)">
				<view class="title">
					<span style="color: #FA453CFF;">*</span>店铺Logo
				</view>
				<view class="pic">
					<view class="item">
						<image v-if="logo_images" :src="logo_images" style="width: 330rpx; height: 240rpx;"></image>
						<image v-else src="/static/McInfo/logo.png" mode="widthFix"
							style="width: 330rpx; height: 240rpx;">
						</image>
					</view>
				</view>
			</view>
			<!-- 上传身份证照片 -->
			<view class="uploSfz">
				<view class="title">
					<span style="color: #FA453CFF;">*</span>上传身份证照片
				</view>
				<view class="pic">
					<view class="item" @click="handleChooseImage(2)">
						<image v-if="icard_images_1" :src="icard_images_1" style="width: 330rpx; height: 240rpx;">
						</image>
						<image v-else src="/static/McInfo/请上传人像面.png" mode="widthFix"
							style="width: 330rpx; height: 240rpx;">
						</image>
					</view>
					<view class="item" @click="handleChooseImage(3)">
						<image v-if="icard_images_2" :src="icard_images_2" style="width: 330rpx; height: 240rpx;">
						</image>
						<image v-else src="/static/McInfo/请上传国徽面.png" mode="widthFix"
							style="width: 330rpx; height: 240rpx;">
						</image>
					</view>
				</view>
			</view>
			<!-- 上传营业执照 -->
			<view class="uploSfz" @click="handleChooseImage(1)">
				<view class="title">
					<span style="color: #FA453CFF;">*</span>营业执照
				</view>
				<view class="pic">
					<view class="item">
						<image v-if="licence_images" :src="licence_images" style="width: 330rpx; height: 240rpx;">
						</image>
						<image v-else src="/static/McInfo/yyzz.png" mode="widthFix"
							style="width: 330rpx; height: 240rpx;">
						</image>
					</view>
				</view>
			</view>
			<!-- 是否同意 -->
			<view class="agree">
				<view class="pic" v-if="show" @click="()=>this.show=false">
					<image src="/static/McInfo/选择.png" mode="widthFix" style="width: 36rpx;height: 36rpx;"></image>
				</view>
				<view class="select" style="width: 36rpx;height: 36rpx; border-radius: 50%;border: 1rpx solid #333;"
					v-else @click="()=>this.show=true">

				</view>
				<view class="ct">
					我已阅读并同意<span style="color: #FA453CFF;"
						@click="go('/page/agreement/agreement?type=3')">《商家入驻协议》</span>
				</view>
			</view>
			<!-- 申请入驻按钮 -->
			<view class="btn" @click="submit">
				申请入驻
			</view>
		</view>
		<!-- 步骤2 -->
		<view class="stepTwo" v-if="num==0" style="margin: 100rpx auto;width: 450rpx;height: 254rpx;">
			<view class="pic" style="margin: 100rpx auto;width: 450rpx;height: 254rpx;">
				<image src="/static/McInfo/wait.png" mode="widthFix" style="width: 450rpx;height: 254rpx;"></image>
			</view>
			<view class="desc" style="margin: 20rpx auto;width: 380rpx; line-height: 50rpx;">
				资料审核中，预计需要1-3个工作日
				敬请耐心等待，谢谢！
			</view>
		</view>
		<!-- 步骤3 -->
		<view class="stepTwice" v-if="num==1">
			<view class="pic" style="margin: 100rpx auto;width: 450rpx;height: 254rpx;">
				<image src="/static/McInfo/over.png" mode="widthFix" style="width: 450rpx;height: 254rpx;"></image>
			</view>
			<view class="desc" style="margin: 20rpx auto;width: 380rpx; line-height: 50rpx;">
				资料审核通过，商家入驻已完成
				进入商家中心查看更多！
			</view>
			<view class="btn" @click="go('/page/MerchantCenter/MerchantCenter')">
				进入商家中心
			</view>
		</view>
		<!-- 结果 -->
		<u-popup v-model="shows" mode="center" width="610rpx" height="420rpx" :closeable="true" border-radius="20">
			<view class="popBox">
				<view class="ts">
					<image src="/static/McInfo/ts.png" mode="widthFix" style="width: 80rpx;height: 80rpx;"></image>
				</view>
				<view class="desc">
					显示后台审核入驻不符合条件驳回的原因
					请认真核实后，重新提交审核
				</view>
				<view class="agreeBtn" @click="()=>this.shows = false">
					好的
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showType" mode="bottom" :closeable="true" border-radius="20">
			<view class="typeList">
				<view class="cell" v-for="item in typeList" :key="item.id" @click="selectTab(item.id)"
					:class="{active:typeId==item.id}">
					{{item.name}}
				</view>
			</view>
		</u-popup>
		<u-picker mode="region" v-model="showAddress" :params="params" @confirm="selectAddress"></u-picker>
	</view>
</template>
<script>
	import {
		createBusinessInfo,
		getBusinessDetail
	} from '@/api/user.js'
	import {
		upImage
	} from '@/api/index.js'
	import {
		toast
	} from '../../utils/common'
		import config from '@/config/config.js'
	export default {
		data() {
			return {
				num: 1,
				//进度
				show: false,
				shows: false,
				showType: false,
				showAddress: false,
				cityData: "",
				address: "",
				name: "",
				typeId: "",
				mch_type: "",
				licence_images: "",
				linkman: "",
				phone: "",
				icard_images_1: "",
				icard_images_2: "",
				logo_images: "",
				lat: "",
				lng: "",
				params: {
					province: true,
					city: true,
					area: true
				},
				typeList: [{
						id: 1,
						name: "食品商户"
					},
					{
						id: 2,
						name: "零售商户"
					}
				],

			}
		},
		onLoad() {
			this.initData()
		},

		methods: {
			initData() {
				getBusinessDetail().then(res => {
					console.log(res);
					if (res.data) {
						uni.setStorageSync('chainId', res.data.id)
					}
					if (!res.data) {
						this.num = -1
					} else {
						this.num = res.data.status
					}
				})
			},
			otherFun(object) {
				console.log(object);
				if (object) {
					this.lat = object.obj.location.lat
					this.lng = object.obj.location.lng
					this.cityData = object.obj.ad_info.province + object.obj.ad_info.city + object.obj.ad_info.district
					this.address = object.obj.address
				} else {
					return
				}
			},
			go(url) {
				uni.navigateTo({
					url
				})
			},
			// 地址选择
			goSelectAddress() {
				this.showAddress = true
			},
			handleChooseImage(index) {
				uni.chooseImage({
					count: 1,
					sourceType: ['album'],
					success: res => {
						let filePath = res.tempFilePaths[0];
						// upImage({file:filePath}).then(res=>{
						// 	console.log(res);
						// })
						uni.showLoading({
							title: "正在上传"
						})
						uni.uploadFile({
							url: config.baseUrl + '/api/public/images/upload',
							filePath: filePath,
							name: 'file',

							success: (res) => {
								console.log(res);
								let data = JSON.parse(res.data)
								let pic =  config.baseUrl +"/uploads/" + data.data
								console.log(pic);
								if (data.code == 200) {
									uni.hideLoading()
									toast("上传成功")
									if (index === 1) {
										this.licence_images = pic
									}
									if (index === 3) {
										this.icard_images_2 = pic
									}
									if (index === 2) {
										this.icard_images_1 = pic
									}
									if (index === 4) {
										this.logo_images = pic
									}
								} else {
									uni.hideLoading()
									toast(res.message)
								}

							}
						})

					}

				});

			},
			submit() {
				let obj = {
					name: this.name,
					mch_type: this.typeId,
					zone: this.address,
					address: this.cityData,
					licence_images: this.licence_images,
					linkman: this.linkman,
					phone: this.phone,
					icard_images_1: this.icard_images_1,
					icard_images_2: this.icard_images_2,
					logo_images: this.logo_images,
					lat: this.lat,
					lng: this.lng
				}
				if (!obj.name) {
					uni.showToast({
						title: "请输入商家名称",
						icon: "none"
					})
					return
				}
				if (!obj.mch_type) {
					uni.showToast({
						title: "请选择商家类型",
						icon: "none"
					})
					return
				}
				if (!obj.zone) {
					uni.showToast({
						title: "请输入地址",
						icon: "none"
					})
					return
				}
				if (!obj.licence_images) {
					uni.showToast({
						title: "请添加营业执照",
						icon: "none"
					})
					return
				}
				if (!obj.linkman) {
					uni.showToast({
						title: "请输入联系人",
						icon: "none"
					})
					return
				}
				if (!obj.phone) {
					uni.showToast({
						title: "请输入联系人电话",
						icon: "none"
					})
					return
				}
				if (!obj.logo_images) {
					uni.showToast({
						title: "请添加商户Logo",
						icon: "none"
					})
					return
				}
				if (!obj.icard_images_1) {
					uni.showToast({
						title: "请添加身份证正面",
						icon: "none"
					})
					return
				}
				if (!obj.icard_images_2) {
					uni.showToast({
						title: "请添加身份证反面",
						icon: "none"
					})
					return
				}
				if (!this.show) {
					uni.showToast({
						title: "请勾选商家入驻协议",
						icon: "none"
					})
					return
				}
				console.log("查看", obj);
				createBusinessInfo(obj).then((res) => {
					console.log(res);
					if (res.data) {
						uni.showToast({
							title: "提交成功",
							icon: "none"
						})
						setTimeout((res) => {
							uni.navigateBack()
						}, 200)

					} else {
						uni.showToast({
							title: res.data.msg,
							icon: "none"
						})
					}
				})
			},
			selectTab(id) {
				this.typeId = id
				this.mch_type = this.typeList[id - 1].name
				this.showType = false
			},
			selectAddress(e){
				console.log(e);
				this.cityData = e.province.name+e.city.name +e.area.name
			}
		}
	}
</script>

<style lang="scss" scoped>
	.typeList {
		width: 750rpx;
		min-height: 300rpx;

		.cell {
			padding: 20rpx 0;
			text-align: center;
			border-top: 1rpx solid #dedede;

			&:nth-child(1) {
				margin-top: 80rpx;
			}
		}

		.cell.active {
			color: #6bc665;
		}
	}

	.box {
		background-color: #f5f5f5;
		box-sizing: border-box;
		padding: 1rpx;
		min-height: 100vh;
	}

	.steps {
		background-color: #fff;
	}

	// 步骤
	.Progress {
		margin-top: 20rpx;
		box-sizing: border-box;
		padding: 20rpx 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.item {
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			width: 50rpx;
			height: 50rpx;
			background: #CCCCCC;
			border-radius: 50%;
			text-align: center;
			line-height: 50rpx;
		}

		.active {

			background: #6BC665;
		}

		.line {
			width: 220rpx;
			height: 2rpx;
			background: #E6E6E6;
		}
	}

	.ProgressCt {
		box-sizing: border-box;
		padding: 0 25rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-align: center;
		font-family: Source Han Sans CN;
		font-weight: 400;

		.title {
			font-size: 26rpx;
			color: #333333;
		}

		.remark {
			font-size: 22rpx;
			color: #999999;
		}
	}

	// 商家入驻信息
	.Ms_info,
	.relationInfo {
		box-sizing: border-box;
		padding: 20rpx;
		width: 750rpx;
		margin-top: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 30rpx;
		background-color: #fff;

		.info {
			font-size: 26rpx;
			color: #999;
			padding: 18rpx 0;
		}

		.item.cancel {
			border: none;
		}

		.item {
			display: flex;
			align-items: center;
			padding: 18rpx 0;
			border-top: 1rpx solid #E6E6E6;

			.title {
				width: 150rpx;
				margin: 0 60rpx 0 0;
			}

			.ipt {
				width: 480rpx;
				margin: 0 10rpx 0 0;
			}

			.icon {
				width: 32rpx;
				height: 32rpx;
				background-size: cover;
				background-image: url('/static/arrow.png');
				background-repeat: no-repeat;
			}

			.dw {
				width: 32rpx;
				height: 32rpx;
				background-size: cover;
				background-image: url('/static/icons/ldw.png');
				background-repeat: no-repeat;
			}
		}


	}

	// 上传证件
	.uploSfz {
		width: 750rpx;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #fff;
		margin-top: 20rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;

		.pic {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;

			.item {
				width: 340rpx;
				height: 250rpx;
				border: 1rpx dashed #333;
			}
		}
	}

	// 是否同意入驻条件
	.agree {
		display: flex;
		align-items: center;
		width: 750rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin-top: 60rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;

		.pic {
			width: 36rpx;
			height: 36rpx;
			box-sizing: border-box;
			overflow: hidden;
			margin: 0 18rpx 0 0;
		}

		.select {
			margin: 0 18rpx 0 0;
		}
	}

	.btn {
		width: 710rpx;
		height: 76rpx;
		background: #6BC665;
		border-radius: 38rpx;
		margin: 40rpx auto;
		text-align: center;
		line-height: 76rpx;
		font-weight: 400;
		color: #FFFFFF;
		font-size: 30rpx;

	}

	.popBox {
		width: 610rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		padding: 20rpx;

		.ts {
			margin: 20rpx auto;
			width: 80rpx;
			height: 80rpx;
		}

		.desc {
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			line-height: 60rpx;
			margin-top: 20rpx;
			text-align: center;
		}

		.agreeBtn {
			width: 200rpx;
			height: 60rpx;
			background: #6BC665;
			border-radius: 30rpx;
			margin: 30rpx auto;
			text-align: center;
			line-height: 60rpx;
			color: #fff;
		}
	}
</style>